<template>
  <div class="discovery-wrapper">
    <div class="header">
      <div class="head bg-white">
        <div class="my-menu-info" @click="showMyInfo = true">
          <van-icon name="wap-nav" :badge="badge" />
        </div>
        <router-link class="search-btn" :to="{ name: 'search' }" tag="div">
          <van-icon name="search" />
          <div class="search-value">{{ place }}</div>
        </router-link>
        <div class="sing-search">
          <span class="iconfont icon-tianchongxing-"></span>
        </div>
      </div>
    </div>

    <!-- 轮播图 -->
    <Swipe />

    <!-- 水平滚动 -->
    <Tabs></Tabs>
    <!-- 推荐歌单 -->
    <personalized-tab />
    <!-- 热门播客 -->
    <dj-hot-tab />
    <!-- 道不尽的华语深情 -->

    <!-- 精选音乐视频 -->

    <div class="bg-white footer"><a href="">点击刷新</a>换一批内容</div>

    <van-popup
      v-model="showMusicPlay"
      closeable
      close-icon="arrow-down"
      close-icon-position="top-left"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <music-play v-if="showMusicPlay" />
    </van-popup>
    <van-popup
      v-model="showMyInfo"
      position="left"
      :style="{ width: '80%', height: '100%', backgroundColor: '#dbe4e6' }"
    >
      <my-info v-if="showMyInfo" />
    </van-popup>
    <!-- 手机号登陆界面 -->
    <van-popup
      v-model="showLogin"
      closeable
      close-icon-position="top-left"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <login-page v-if="showLogin" />
    </van-popup>
  </div>
</template>
<script>
import { mapState, mapActions, mapMutations } from "vuex";
import Tabs from "../components/Tab.vue";
import Swipe from "../components/swipe.vue";
import PersonalizedTab from "../components/personalizedTab.vue";
import DjHotTab from "../components/djHotTab.vue";
import MusicPlay from "../components/musicPlay.vue";
import MyInfo from "../components/myInfo.vue";
import LoginPage from "./LoginPage.vue";

export default {
  data() {
    return {
      place: "大家都在搜 秦霄贤",
      showMyInfo: false,
    };
  },
  components: {
    Tabs,
    Swipe,
    PersonalizedTab,
    DjHotTab,
    MusicPlay,
    MyInfo,
    LoginPage,
  },
  computed: {
    ...mapState({
      songId: (state) => state.songId,
      showPlayMusic: (state) => state.showPlayMusic,
      showPageLogin: (state) => state.showPageLogin,
    }),
    showMusicPlay: {
      get() {
        return this.showPlayMusic;
      },
      set(val) {
        this.showSongPlay(val);
      },
    },
    showLogin: {
      get() {
        return this.showPageLogin;
      },
      set(val) {
        this.showLoginPage(val);
      },
    },
    badge() {
      return "1";
    },
  },
  methods: {
    ...mapMutations(["showSongPlay", "showLoginPage"]),
  },
};
</script>

<style lang="less" scoped>
.iconfont {
  font-size: 22px !important;
}
.discovery-wrapper {
  background-color: #eee;
  width: 100%;
  min-height: 100vh;
  position: absolute;
  font-size: 14px;
  .header {
    width: 100vw;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2;
    .head {
      height: 31.5px;
      padding: 11px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .my-menu-info {
        font-size: 22px;
        line-height: 31.5px;
      }
      .search-btn {
        height: 31.5px;
        line-height: 31.5px;
        background: #eee;
        flex: 1 1 auto;
        margin: 0 7px;
        border-radius: 10px;
        text-align: center;
        color: #a1a1a1;
        > * {
          vertical-align: middle;
          display: inline-block;
        }
      }
      .sing-search {
        font-size: 22px;
        line-height: 31.5px;
      }
    }
  }
  .footer {
    margin: 8px 0 60px;
    padding: 10px;
    text-align: center;
  }
}
</style>